<template>
	<div style="margin-top: 10px">
		<el-container>
			<el-header>
				<div>
					<el-input placeholder="请输入用户名进行搜索..." prefix-icon="el-icon-search"
							  clearable
							  @clear="loadUsers"
							  style="width: 350px;margin-right: 10px" v-model="name"
							  @keydown.enter.native="loadUsers" :disabled="showAdvanceSearchView"></el-input>
					<el-button icon="el-icon-search" type="primary"  @click="loadUsers" :disabled="showAdvanceSearchView">搜索</el-button>
				</div>
				<div>
					<el-tooltip content="导出数据" placement="top">
						<el-button type="success" @click="exportData" icon="el-icon-download" circle>
						</el-button>
					</el-tooltip>
					<el-tooltip content="添加用户" placement="top">
						<el-button type="primary" icon="el-icon-plus" @click="showAddUserView" circle>
					</el-button>
					</el-tooltip>
					
				</div>
			</el-header>
			<el-main>			
				<div class="user-container">
				            <el-card class="user-card" v-for="(user,index) in users" :key="index">
				                <div slot="header" class="clearfix">
				                    <span>用户名：{{user.name}}</span>
				                    <el-button style="float: right; padding: 3px 0;color: #e30007;" type="text"
				                               icon="el-icon-delete" @click="deleteUser(user)"></el-button>
						    <el-button @click="usersDetails(user)" style="float: right; padding: 3px 0;color: #409EFF;" type="text" 
							icon="el-icon-edit"></el-button>
				                </div>
				                <div>
									<div class="img-container">
										<img src="../../assets/touxiang.jpg" class="userface-img">
									</div>
				                    <div class="userinfo-container">
				                        <div>帐号：{{user.userid}}</div>
				                        <div>密码：{{user.password}}</div>
				                        <div>用户角色：{{user.role}}
				                        </div>
				                    </div>
				                </div>
				            </el-card>
				 </div>
				
				<el-dialog
				      title="修改用户信息"
				      :visible.sync="diaEitVisible">
					  <div>
				      <el-form :model={usersForm} :rules="rules" style="text-align: left" ref="usersForm">
						<el-form-item prop="userid" style="height: 0">
						          <el-input type="hidden" v-model="usersForm.userid" autocomplete="off"></el-input>
						        </el-form-item>
				        <el-form-item label="用户名" prop="name">
				          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入用户名"
						  v-model="usersForm.name" autocomplete="off"></el-input>
				        </el-form-item>
				        <el-form-item label="密码" prop="password">
				          <el-input 
						  size="mini" style="width: 150px"
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入新密码"
						  type="password" v-model="usersForm.password" autocomplete="off"></el-input>
				        </el-form-item>
				        <el-form-item label="角色" prop="role">
				           <el-radio-group v-model="usersForm.role">
							  <el-radio label="admin">admin</el-radio>
							  <el-radio label="user">user</el-radio>
						   </el-radio-group>
				        </el-form-item>
				      </el-form>
					  </div>
					   <span slot="footer" class="dialog-footer">
					      <el-button @click="diaEitVisible = false">取 消</el-button>
					      <el-button type="primary" @click="showEditUserView('usersForm')">确 定</el-button>
					   </span>
				</el-dialog>
				<el-dialog
				      title="添加用户"
				      :visible.sync="dialogVisible"
					  @close="clear">
					  <div>
				      <el-form :model={usersForm} :rules="rules" style="text-align: left" ref="usersForm">
						<el-form-item label="帐号" prop="userid">
						          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit"   placeholder="请输入帐号"
						  v-model="usersForm.userid" autocomplete="off"></el-input>
						        </el-form-item>
				        <el-form-item label="用户名" prop="name">
				          <el-input size="mini" style="width: 150px" 
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入用户名"
						  v-model="usersForm.name" autocomplete="off"></el-input>
				        </el-form-item>
				        <el-form-item label="密码" prop="password">
				          <el-input 
						  size="mini" style="width: 150px"
						  prefix-icon="el-icon-edit" 
						   placeholder="请输入密码"
						  type="password" v-model="usersForm.password" autocomplete="off"></el-input>
				        </el-form-item>
				        <el-form-item label="角色" prop="role">
				           <el-radio-group v-model="usersForm.role">
							  <el-radio label="admin">admin</el-radio>
							  <el-radio label="user">user</el-radio>
						   </el-radio-group>
				        </el-form-item>
				      </el-form>
					  </div>
					   <span slot="footer" class="dialog-footer">
					      <el-button @click="dialogVisible = false">取 消</el-button>
					      <el-button type="primary" @click="AddUserView('usersForm')">确 定</el-button>
					   </span>
				</el-dialog>
			</el-main>
			<el-footer>
				<div>
					<el-pagination
					  background
					  @current-change="currentChange"
					  @size-change="sizeChange"
					  layout="prev, pager, next, jumper, ->, total, slot"
					  :total="total">
					</el-pagination>
				</div>
								
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	export default{
		data() {
			const validatePassword = (rule, value, callback) => {
			      if (!value) {
			        callback(new Error('必须输入密码'))
			      }else {
			        callback()
			      }
			    };
		    return {
		       users: [],
			   userid: '',
			   name: '',
			   loading: false,
			   total: 0,
			   showAdvanceSearchView: false,
			   page:1,
			   size:10,
			   title:'',
			   dialogVisible: false,
			   diaEitVisible:false,
			   usersForm: {
			   			   userid: '',
			   			   password: '',
			   			   name: '',
			   			   role: '',
			   			  },
				rules: {
					name: [{
					          required: true,
					          message: '用户名不能为空',
					          trigger: blur
					        },
					        {min:1,max:15,message:'长度在1到15个字符之间'}
					        ],
					password: [{
					          required: true,
					          message: '密码不能为空',
					          trigger: blur
					        },
					        {validator: validatePassword,
							trigger: 'blur'}
					        ],
				}
			   }
		},
		
		mounted:function() {
			this.loadUsers();
		},
		
		methods: {
			exportData() {
				window.open('/user/basic/exportUserInfo', '_parent');
				},
			clear () {
			     this.usersForm = {
			        userid: '',
			        name: '',
			        password: '',
			        role: '',
			      }
			    },
			showAddUserView(){
				this.dialogVisible = true;
			},
			AddUserView(data){
				this.addUser();
				this.title = '添加用户';
				this.usersForm = data;
			},
			usersDetails (resp) {
			      this.diaEitVisible = true;
			      this.usersForm = {
			        userid: resp.userid,
			        name: resp.name,
			        password: resp.password,
			        role: resp.role,
			      };
			    },
			sizeChange(currentSize) {
				this.size = currentSize;
				this.loadUsers();
					},
			 currentChange(currentPage) {
				this.page = currentPage;
				this.loadUsers();
					},
			deleteUser(data) {
				this.$confirm('此操作将永久删除【' + data.name + '】, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteRequest("/user/basic/" + data.userid).then(resp => {
						if (resp) {
							this.$notify.info({
							  title: '消息',
							  message: resp.info
							});
							this.loadUsers();
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
				},
			 showEditUserView(data) {
					this.updateUser();
					this.title = '修改用户信息';
					this.usersForm = data;
					
			    },
			addUser(){
				this.postRequest('/user/basic/addUser',{
				  userid: this.usersForm.userid,
				  name: this.usersForm.name,
				  password: this.usersForm.password,
				  role: this.usersForm.role
				}).then(resp =>{
							  if(resp){
									this.$notify.info({
									  title: '消息',
									  message: resp.info
									});
									}
									this.dialogVisible = false;
									this.loadUsers();
								})
			},
			
			updateUser(){				
			this.postRequest('/user/basic/updateUser',{
            userid: this.usersForm.userid,
            name: this.usersForm.name,
            password: this.usersForm.password,
            role: this.usersForm.role
          }).then(resp =>{
			  if(resp){
					this.$notify.info({
					  title: '消息',
					  message: resp.info
					});
					}
					this.diaEitVisible = false;
					this.loadUsers();
				})
			},
				
		    loadUsers(){
			   this.loading = true;
			   let url = '/user/basic/?page=' + this.page +'&pageSize='+this.size;
			    
				if (this.name) {
					url = '/user/basic/selectInfo?name=' + this.name + '&page='+ this.page +'&pageSize='+this.size;
				}
				
			   this.getRequest(url).then(resp =>{
				   this.loading = false;
				   if(resp){
					   this.users = resp.users;
					   this.total = resp.count;
				   }
			   })
		   }
		}
	}
</script>
	
<style>
	.el-main {
	    color:  #E9EEF3;
	    line-height: 20px !important;
	}
	.el-header{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0px 15px;
		box-sizing: border-box;
	}
	.el-footer {
	    position:fixed;
		bottom:10px;
		left: 0;
		right: 0;
		line-height:60px;
	  }
	.el-pagination {
		display: flex;
		justify-content: flex-end;
		text-align: center;
	}
	.userinfo-container div {
	        font-size: 12px;
	        color: #409eff;
	    }
	.userinfo-container {
	        margin-top: 20px;
	    }
	.user-container {
	        margin-top: 10px;
	        display: flex;
	        flex-wrap: wrap;
	        justify-content: space-around;
	    }
	.user-card {
		width: 210px;
		margin-bottom: 20px;
	}
	.userface-img {
	        width: 55px;
	        height: 55px;
	        border-radius: 55px;
	}
	.img-container {
	        width: 100%;
	        display: flex;
	        justify-content: center;
	}
</style>
